<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>GanLing-Guitar-on-HTML</title>
		<style>
			div{height:20px; display:inline-block}
		</style>
	</head>
	<body style="background-color: rgb(200,200,200);"; onload="getScreen()">
		<! 1  #1   2  #2   3   4  #4   5  #5   6  #6   7>
		<! 1   2   3   4   5   6   7   8   9  10  11  12>
		<div style="background-color:rgb(20 ,20 ,20 ); width:10px; "; onclick="playAudio(5 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:99px; "; onclick="playAudio(6 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:96px; "; onclick="playAudio(7 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:93px; "; onclick="playAudio(8 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:90px; "; onclick="playAudio(9 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:87px; "; onclick="playAudio(10,4)"></div>
		<div style="background-color:rgb(100,100,100); width:84px; "; onclick="playAudio(11,4)"></div>
		<div style="background-color:rgb(100,100,100); width:81px; "; onclick="playAudio(12,4)"></div>
		<div style="background-color:rgb(100,100,100); width:78px; "; onclick="playAudio(1 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:75px; "; onclick="playAudio(2 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:72px; "; onclick="playAudio(3 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:69px; "; onclick="playAudio(4 ,5)"></div>
		<div style="background-color:rgb(100,150,150); width:66px; "; onclick="playAudio(5 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:63px; "; onclick="playAudio(6 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:60px; "; onclick="playAudio(7 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:57px; "; onclick="playAudio(8 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:54px; "; onclick="playAudio(9 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:51px; "; onclick="playAudio(10,5)"></div>
		<div style="background-color:rgb(100,100,100); width:48px; "; onclick="playAudio(11,5)"></div>
		<div style="background-color:rgb(100,100,100); width:45px; "; onclick="playAudio(12,5)"></div>
		<div style="background-color:rgb(100,100,100); width:42px; "; onclick="playAudio(1 ,6)"></div>
		<div style="background-color:rgb(100,100,100); width:39px; "; onclick="playAudio(2 ,6)"></div>
		<div style="background-color:rgb(100,100,100); width:36px; "; onclick="playAudio(3 ,6)"></div>
		<div style="background-color:rgb(100,100,100); width:33px; "; onclick="playAudio(4 ,6)"></div>
		<div style="background-color:rgb(100,150,150); width:30px; "; onclick="playAudio(5 ,6)"></div>
		<br/>
		<div style="background-color:rgb(20 ,20 ,20 ); width:10px; "; onclick="playAudio(12,3)"></div>
		<div style="background-color:rgb(100,100,100); width:99px; "; onclick="playAudio(1 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:96px; "; onclick="playAudio(2 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:93px; "; onclick="playAudio(3 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:90px; "; onclick="playAudio(4 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:87px; "; onclick="playAudio(5 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:84px; "; onclick="playAudio(6 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:81px; "; onclick="playAudio(7 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:78px; "; onclick="playAudio(8 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:75px; "; onclick="playAudio(9 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:72px; "; onclick="playAudio(10,4)"></div>
		<div style="background-color:rgb(100,100,100); width:69px; "; onclick="playAudio(11,4)"></div>
		<div style="background-color:rgb(100,150,150); width:66px; "; onclick="playAudio(12,4)"></div>
		<div style="background-color:rgb(100,100,100); width:63px; "; onclick="playAudio(1 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:60px; "; onclick="playAudio(2 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:57px; "; onclick="playAudio(3 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:54px; "; onclick="playAudio(4 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:51px; "; onclick="playAudio(5 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:48px; "; onclick="playAudio(6 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:45px; "; onclick="playAudio(7 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:42px; "; onclick="playAudio(8 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:39px; "; onclick="playAudio(9 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:36px; "; onclick="playAudio(10,5)"></div>
		<div style="background-color:rgb(100,100,100); width:33px; "; onclick="playAudio(11,5)"></div>
		<div style="background-color:rgb(100,150,150); width:30px; "; onclick="playAudio(12,5)"></div>
		<br/>
		<div style="background-color:rgb(20 ,20 ,20 ); width:10px; "; onclick="playAudio(8 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:99px; "; onclick="playAudio(9 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:96px; "; onclick="playAudio(10,3)"></div>
		<div style="background-color:rgb(150,100,150); width:93px; "; onclick="playAudio(11,3)"></div>
		<div style="background-color:rgb(100,100,100); width:90px; "; onclick="playAudio(12,3)"></div>
		<div style="background-color:rgb(150,100,150); width:87px; "; onclick="playAudio(1 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:84px; "; onclick="playAudio(2 ,4)"></div>
		<div style="background-color:rgb(150,100,150); width:81px; "; onclick="playAudio(3 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:78px; "; onclick="playAudio(4 ,4)"></div>
		<div style="background-color:rgb(150,100,150); width:75px; "; onclick="playAudio(5 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:72px; "; onclick="playAudio(6 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:69px; "; onclick="playAudio(7 ,4)"></div>
		<div style="background-color:rgb(100,150,150); width:66px; "; onclick="playAudio(8 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:63px; "; onclick="playAudio(9 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:60px; "; onclick="playAudio(10,4)"></div>
		<div style="background-color:rgb(150,100,150); width:57px; "; onclick="playAudio(11,4)"></div>
		<div style="background-color:rgb(100,100,100); width:54px; "; onclick="playAudio(12,4)"></div>
		<div style="background-color:rgb(150,100,150); width:51px; "; onclick="playAudio(1 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:48px; "; onclick="playAudio(2 ,5)"></div>
		<div style="background-color:rgb(150,100,150); width:45px; "; onclick="playAudio(3 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:42px; "; onclick="playAudio(4 ,5)"></div>
		<div style="background-color:rgb(150,100,150); width:39px; "; onclick="playAudio(5 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:36px; "; onclick="playAudio(6 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:33px; "; onclick="playAudio(7 ,5)"></div>
		<div style="background-color:rgb(100,150,150); width:30px; "; onclick="playAudio(8 ,5)"></div>
		<br/>
		<div style="background-color:rgb(20 ,20 ,20 ); width:10px; "; onclick="playAudio(3 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:99px; "; onclick="playAudio(4 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:96px; "; onclick="playAudio(5 ,3)"></div>
		<div style="background-color:rgb(150,100,150); width:93px; "; onclick="playAudio(6 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:90px; "; onclick="playAudio(7 ,3)"></div>
		<div style="background-color:rgb(150,100,150); width:87px; "; onclick="playAudio(8 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:84px; "; onclick="playAudio(9 ,3)"></div>
		<div style="background-color:rgb(150,100,150); width:81px; "; onclick="playAudio(10,3)"></div>
		<div style="background-color:rgb(100,100,100); width:78px; "; onclick="playAudio(11,3)"></div>
		<div style="background-color:rgb(150,100,150); width:75px; "; onclick="playAudio(12,3)"></div>
		<div style="background-color:rgb(100,100,100); width:72px; "; onclick="playAudio(1 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:69px; "; onclick="playAudio(2 ,4)"></div>
		<div style="background-color:rgb(100,150,150); width:66px; "; onclick="playAudio(3 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:63px; "; onclick="playAudio(4 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:60px; "; onclick="playAudio(5 ,4)"></div>
		<div style="background-color:rgb(150,100,150); width:57px; "; onclick="playAudio(6 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:54px; "; onclick="playAudio(7 ,4)"></div>
		<div style="background-color:rgb(150,100,150); width:51px; "; onclick="playAudio(8 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:48px; "; onclick="playAudio(9 ,4)"></div>
		<div style="background-color:rgb(150,100,150); width:45px; "; onclick="playAudio(10,4)"></div>
		<div style="background-color:rgb(100,100,100); width:42px; "; onclick="playAudio(11,4)"></div>
		<div style="background-color:rgb(150,100,150); width:39px; "; onclick="playAudio(12,4)"></div>
		<div style="background-color:rgb(100,100,100); width:36px; "; onclick="playAudio(1 ,5)"></div>
		<div style="background-color:rgb(100,100,100); width:33px; "; onclick="playAudio(2 ,5)"></div>
		<div style="background-color:rgb(100,150,150); width:30px; "; onclick="playAudio(3 ,5)"></div>
		<br/>
		<div style="background-color:rgb(20 ,20 ,20 ); width:10px; "; onclick="playAudio(10,2)"></div>
		<div style="background-color:rgb(100,100,100); width:99px; "; onclick="playAudio(11,2)"></div>
		<div style="background-color:rgb(100,100,100); width:96px; "; onclick="playAudio(12,2)"></div>
		<div style="background-color:rgb(100,100,100); width:93px; "; onclick="playAudio(1 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:90px; "; onclick="playAudio(2 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:87px; "; onclick="playAudio(3 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:84px; "; onclick="playAudio(4 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:81px; "; onclick="playAudio(5 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:78px; "; onclick="playAudio(6 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:75px; "; onclick="playAudio(7 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:72px; "; onclick="playAudio(8 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:69px; "; onclick="playAudio(9 ,3)"></div>
		<div style="background-color:rgb(100,150,150); width:66px; "; onclick="playAudio(10,3)"></div>
		<div style="background-color:rgb(100,100,100); width:63px; "; onclick="playAudio(11,3)"></div>
		<div style="background-color:rgb(100,100,100); width:60px; "; onclick="playAudio(12,3)"></div>
		<div style="background-color:rgb(100,100,100); width:57px; "; onclick="playAudio(1 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:54px; "; onclick="playAudio(2 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:51px; "; onclick="playAudio(3 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:48px; "; onclick="playAudio(4 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:45px; "; onclick="playAudio(5 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:42px; "; onclick="playAudio(6 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:39px; "; onclick="playAudio(7 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:36px; "; onclick="playAudio(8 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:33px; "; onclick="playAudio(9 ,4)"></div>
		<div style="background-color:rgb(100,150,150); width:30px; "; onclick="playAudio(10,4)"></div>
		<br/>
		<div style="background-color:rgb(20 ,20 ,20 ); width:10px; "; onclick="playAudio(5 ,2)"></div>
		<div style="background-color:rgb(100,100,100); width:99px; "; onclick="playAudio(6 ,2)"></div>
		<div style="background-color:rgb(100,100,100); width:96px; "; onclick="playAudio(7 ,2)"></div>
		<div style="background-color:rgb(100,100,100); width:93px; "; onclick="playAudio(8 ,2)"></div>
		<div style="background-color:rgb(100,100,100); width:90px; "; onclick="playAudio(9 ,2)"></div>
		<div style="background-color:rgb(100,100,100); width:87px; "; onclick="playAudio(10,2)"></div>
		<div style="background-color:rgb(100,100,100); width:84px; "; onclick="playAudio(11,2)"></div>
		<div style="background-color:rgb(100,100,100); width:81px; "; onclick="playAudio(12,2)"></div>
		<div style="background-color:rgb(100,100,100); width:78px; "; onclick="playAudio(1 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:75px; "; onclick="playAudio(2 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:72px; "; onclick="playAudio(3 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:69px; "; onclick="playAudio(4 ,3)"></div>
		<div style="background-color:rgb(100,150,150); width:66px; "; onclick="playAudio(5 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:63px; "; onclick="playAudio(6 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:60px; "; onclick="playAudio(7 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:57px; "; onclick="playAudio(8 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:54px; "; onclick="playAudio(9 ,3)"></div>
		<div style="background-color:rgb(100,100,100); width:51px; "; onclick="playAudio(10,3)"></div>
		<div style="background-color:rgb(100,100,100); width:48px; "; onclick="playAudio(11,3)"></div>
		<div style="background-color:rgb(100,100,100); width:45px; "; onclick="playAudio(12,3)"></div>
		<div style="background-color:rgb(100,100,100); width:42px; "; onclick="playAudio(1 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:39px; "; onclick="playAudio(2 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:36px; "; onclick="playAudio(3 ,4)"></div>
		<div style="background-color:rgb(100,100,100); width:33px; "; onclick="playAudio(4 ,4)"></div>
		<div style="background-color:rgb(100,150,150); width:30px; "; onclick="playAudio(5 ,4)"></div>
		
		 
		<script>
		
		var audioContext = new (window.AudioContext || window.webkitAudioContext)();

		 
		// 变调函数，这里只是一个示例，可以根据需要进行更复杂的处理
		function playAudio(a,b) {
            var note = a+12*b-46;
		    var pitch = 220*(1.0594631**note);
		    
            var oscillator = audioContext.createOscillator();
		    //'sine'     正弦波
		    //'square'   方波
		    //'sawtooth' 锯齿波
		    //'triangle' 三角波  
		    //'custom'
		    oscillator.type = 'square';
		    oscillator.frequency.value = pitch; // 音调的频率

		    var gainNode = audioContext.createGain();
			oscillator.connect(gainNode);
			gainNode.gain.value = 0.02;
			gainNode.connect(audioContext.destination);
			oscillator.start();
			
			gainNode.gain.linearRampToValueAtTime(0.00, audioContext.currentTime + 0.5);
			//gainNode.gain.expRampToValue(0.00);
			
			oscillator.stop(audioContext.currentTime+1);
		}

        function getScreen() {
			var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			//alert("width:" + width);
		}

		</script>
	</body>
</html>